<template>
         <el-form :model="formData" ref="form" size='small'>
          <el-row :gutter="15">
            <!-- 第一列 -->
            <el-col :span="12">
              <!-- 文本输入框 -->
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <!-- 数字输入框 -->
              <el-form-item label="年龄" prop="age">
                <el-input-number
                  v-model="formData.age"
                  :min="0"
                  placeholder="请输入年龄"
                ></el-input-number>
              </el-form-item>
              <!-- 单选框 -->
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="formData.gender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- 第二列 -->
            <el-col :span="12">
              <!-- 复选框 -->
              <el-form-item label="爱好" prop="hobbies">
                <el-checkbox-group v-model="formData.hobbies">
                  <el-checkbox label="阅读"></el-checkbox>
                  <el-checkbox label="运动"></el-checkbox>
                  <el-checkbox label="音乐"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <!-- 下拉选择框 -->
              <el-form-item label="职业" prop="job">
                <el-select v-model="formData.job" placeholder="请选择职业">
                  <el-option label="教师" value="teacher"></el-option>
                  <el-option label="程序员" value="programmer"></el-option>
                  <el-option label="设计师" value="designer"></el-option>
                </el-select>
              </el-form-item>
              <!-- 日期选择器 -->
              <el-form-item label="入职日期" prop="hireDate">
                <el-date-picker
                  v-model="formData.hireDate"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
              <!-- 文本域 -->
            </el-col>
          </el-row>
          <el-form-item label="个人简介" prop="introduction">
            <el-input
              type="textarea"
              v-model="formData.introduction"
              :rows="3"
              placeholder="请输入个人简介"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" size="small">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />
        </el-table>

        <el-button type="primary" style="margin-top: 12px" @click="submitForm"
          >提交</el-button
        >
</template>

<script setup>
const formData = reactive({
  name: "",
  age: 0,
  gender: "",
  hobbies: [],
  job: "",
  hireDate: "",
  introduction: "",
});
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style lang="scss" scoped>

</style>